<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <script src="./js/remScale.js"></script>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/ShoppingCart.css">
    <link rel="stylesheet" href="./font/iconfont.css">
    <style>
        @font-face {
            font-family: 'iconfont';
            src: url('iconfont.ttf?t=1622789329604') format('truetype');
        }

        .iconfont {
            font-family: "iconfont" !important;
            font-size: .16rem;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        body{
            padding-bottom: 1rem;
        }
    </style>
</head>
<body>
    <!-- 头部 -->
    <header id="sc_header">
        <div class="header">
            <div>
                <a href="#">全部(20)</a>
                <div class="underline"></div>
            </div>
            <div>
                <a href="#">降价(4)</a>
                <div class="underline"></div>
            </div>
            <div>
                <a href="#">常卖(2)</a>
                <div class="underline"></div>
            </div>
            <div>
                <a href="#" class='iconfont'>分类&#xeb13;</a>
                <div class="underline"></div>
            </div>
        </div>
    </header>
    <!-- 小U自营 -->
    <div id="self_sup">
        <p>
            <input type="radio">
            <span class="xiaoU">小U自营</span>
        </p>
        <span class="last">已免运费<a href="#">领券</a></span>
    </div>
    <!-- 购物车里的物件 -->
    <main id="content">
        <div class="goods" style="margin-top: 0;">
            <input type="radio">
            <img src="./images/1.png" alt="">
            <div class="goods_info">
                <h2 class="textflow">溪牧原山茶花洁面泡沫&nbsp;氨基酸</h2>
                <h3 class="textflow">敏感肌可用，控油祛痘、男女可用</h3>
                <div class="choose">
                    粉色&nbsp;50ML <span class="iconfont">&#xe63c;</span>
                </div>
                <p class="less">比加入时降低￥100</p>
                <p class="pice">￥<strong>999</strong><del>￥1099</del></p>
                <div class="number">
                    <span class="iconfont">&#xe61a;</span>
                    <div>1</div>
                    <span class="iconfont">&#xe715;
                    </span>
                </div>
            </div>
        </div>
        <div class="goods">
            <input type="radio">
            <img src="./images/2.png" alt="">
            <div class="goods_info">
                <h2 class="textflow">水肌美男士清爽控油洗面奶，后边的省略</h2>
                <h3 class="textflow">净透毛孔，温和不紧绷，清爽控油</h3>
                <div class="choose">
                    粉色&nbsp;50ML <span class="iconfont">&#xe63c;</span>
                </div>
                <p class="less">比加入时降低￥100</p>
                <p class="pice">￥<strong>999</strong><del>￥1099</del></p>
                <div class="number">
                    <span class="iconfont">&#xe61a;</span>
                    <div>1</div>
                    <span class="iconfont">&#xe715;
                    </span>
                </div>
            </div>
        </div>
        <div class="goods">
            <input type="radio">
            <img src="./images/3.png" alt="">
            <div class="goods_info">
                <h2 class="textflow">水肌美净肤洁面膏&nbsp;100G/支，后边的省略</h2>
                <h3 class="textflow">深层清洁肌肤，温和又滋润，日常居家必备</h3>
                <div class="choose">
                    粉色&nbsp;50ML <span class="iconfont">&#xe63c;</span>
                </div>
                <p class="less">比加入时降低￥100</p>
                <p class="pice">￥<strong>999</strong><del>￥1099</del></p>
                <div class="number">
                    <span class="iconfont">&#xe61a;</span>
                    <div>1</div>
                    <span class="iconfont">&#xe715;
                    </span>
                </div>
            </div>
        </div>
    </main>
    <!-- 品牌精选 -->
    <div id="self_sup" style="margin-top: .2rem;">
        <p>
            <input type="radio">
            <span class="xiaoU">品牌精选</span>
        </p>
        <span class="last">已免运费<a href="#">领券</a></span>
    </div>
    <!-- 购物车里的物件 -->
    <main id="content">
        <div class="goods" style="margin-top: 0;">
            <input type="radio">
            <img src="./images/4.png" alt="">
            <div class="goods_info">
                <h2 class="textflow">多芬男士+护理净油洁面泡沫后边的省略</h2>
                <h3 class="textflow">击退油光，净在掌握，有效控油</h3>
                <div class="choose">
                    粉色&nbsp;50ML <span class="iconfont">&#xe63c;</span>
                </div>
                <p class="less">比加入时降低￥100</p>
                <p class="pice">￥<strong>999</strong><del>￥1099</del></p>
                <div class="number">
                    <span class="iconfont">&#xe61a;</span>
                    <div>1</div>
                    <span class="iconfont">&#xe715;
                    </span>
                </div>
            </div>
        </div>
        <div class="goods">
            <input type="radio">
            <img src="./images/4.png" alt="">
            <div class="goods_info">
                <h2 class="textflow">多芬男士+护理净油洁面泡沫后边的省略</h2>
                <h3 class="textflow">击退油光，净在掌握，有效控油</h3>
                <div class="choose">
                    粉色&nbsp;50ML <span class="iconfont">&#xe63c;</span>
                </div>
                <p class="less">比加入时降低￥100</p>
                <p class="pice">￥<strong>999</strong><del>￥1099</del></p>
                <div class="number">
                    <span class="iconfont">&#xe61a;</span>
                    <div>1</div>
                    <span class="iconfont">&#xe715;
                    </span>
                </div>
            </div>
        </div>
        <div class="goods">
            <input type="radio">
            <img src="./images/4.png" alt="">
            <div class="goods_info">
                <h2 class="textflow">多芬男士+护理净油洁面泡沫后边的省略</h2>
                <h3 class="textflow">击退油光，净在掌握，有效控油</h3>
                <div class="choose">
                    粉色&nbsp;50ML <span class="iconfont">&#xe63c;</span>
                </div>
                <p class="less">比加入时降低￥100</p>
                <p class="pice">￥<strong>999</strong><del>￥1099</del></p>
                <div class="number">
                    <span class="iconfont">&#xe61a;</span>
                    <div>1</div>
                    <span class="iconfont">&#xe715;
                    </span>
                </div>
            </div>
        </div>
        <div class="goods">
            <input type="radio">
            <img src="./images/4.png" alt="">
            <div class="goods_info">
                <h2 class="textflow">多芬男士+护理净油洁面泡沫后边的省略</h2>
                <h3 class="textflow">击退油光，净在掌握，有效控油</h3>
                <div class="choose">
                    粉色&nbsp;50ML <span class="iconfont">&#xe63c;</span>
                </div>
                <p class="less">比加入时降低￥100</p>
                <p class="pice">￥<strong>999</strong><del>￥1099</del></p>
                <div class="number">
                    <span class="iconfont">&#xe61a;</span>
                    <div>1</div>
                    <span class="iconfont">&#xe715;
                    </span>
                </div>
            </div>
        </div>
    </main>
    <!-- 底部 -->
    <footer id="sc_footer">
        <div class="scf_top">
            <div class="scft_left">
                <div><input type="radio">
                <span>全选</span></div>
            </div>
            <div class="scft_right">
                <div>
                    <h2>合计</h2>
                    <p>已免运费</p>
                </div>
                <div>
                    <h2>￥1998</h2>
                    <p>已优惠￥200元</p>
                </div>
                <div>
                    结算
                </div>
            </div>
        </div>
        <!-- 底部页面导航下半部 -->
        <div class="scf_bottom">
            <a href="./index.html"><i class="iconfont ma">&#xe6cb;
            </i><p>商城</p></a>
            <a href="./classify.html"><i class="iconfont">&#xe6cb;
            </i><p>分类</p></a>
            <a href="#"><i class="iconfont">&#xe6cb;
            </i><p>购物车</p></a>
            <a href="./myself.html"><i class="iconfont">&#xe6cb;
            </i><p>我</p></a>
        </div>
    </footer>
</body>
</html>